<template>
  <!-- 蔗糖减水全光谱 -->
  <div class="space text-center">
    <template v-for="(chart,index) in allStepOneCharts" >
      <wave-chart 
        :key="index" 
        :id="id+index"
        :data='chart'
        @shotImg="shotImg">
      </wave-chart>
    </template>
  </div>
  <!-- 使用方法
  <Saccharose 
    :originalData="originalData" 
    :title="$t('page.fullSpect')"
    @showImg="shotImg"
    :resultValue="resultValue">
  </Saccharose> -->
</template>

<script>
import waveChart from '@/components/WaveChart'
import { COLORLIST } from '@/utils/variate'
export default {
  components: {
    waveChart
  },
  props: {
    // 后端返回的计算数组
    originalData: {
      type: Object,
      default: () => {}
    },
    // 返回的类型
    dissType: {
      type: String,
      default: 'v2'
    },
    // 后端返回提交的数据用于前端使用
    resultValue: {
      type: Object,
      default: () => {}
    },
    // echarts的标题
    title: {
      type: String,
      default: ''
    },
    // DOM-Id
    id: {
      type: String,
      default: '',
      required: true
    },
    sprone_dissociation: {
      type: Array,
      default: () => [0, 0]
    }
    // 浓度列表
    // waveName: {
    //   type: Array,
    //   default: () => []
    // },
    // 后端返回用于计算中心线
    // dissociation: {
    //   type: Array,
    //   default: () => []
    // },
  },
  watch: {
    originalData: {
      handler(value) {
        this.$nextTick(() => {
          this.allStepOneCharts = []
          for (const k in value) {
            if (k !== 'time') {
              this.waveName.push(k)
            }
          }
          this.newDrawChart()
        })
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      allStepOneCharts: [], // 线形图数据列表
      tooltipList: [], // 线形图tooltip需要的数据
      waveName: []
    }
  },
  methods: {
    newDrawChart() {
      let chartsOption = {
          // 设置title
          title: {
            text: this.title,
          },
          // 是否使用动画
          animation: false,
          // 提示弹窗
          tooltip: {
            trigger: 'axis',
          },
          color: COLORLIST,
          /*  数据数组, 如果 data 没有被指定，会自动从当前系列中获取。
              多数系列会取自 series.name 或者 series.encode */ 
          legend: {
            type: 'scroll',
            orient: 'vertical',
            align: 'left',
            right: '20',
            top: '60',
            data: this.waveName,
            icon: 'circle',
            width: "80%",
            textStyle: {
              fontSize: 20
            },
          },
          // echarts 显示位置
          grid: {
            left: '3%',
            right: '13%',
            bottom: '15%',
            containLabel: true, // 是否展示轴刻度
          },
          // 滑动条型数据区域缩放组件
          dataZoom: [
            {
              type: 'inside',  // 类型，
              xAxisIndex: 0,   // 控制哪个轴
              height: 15,
              handleSize: '140%',
              handleStyle: {
                color: '#999',
              },
              filterMode: 'none',  // 数据过滤模式，放大缩小
            }, 
            {
              type: 'inside',
              yAxisIndex: 0,
              width:  15,
              handleSize: '140%',
              handleStyle: {
                color: '#999',
              },
              filterMode: 'none',
            },
          ],
          // 是否可以下载图片
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          // x轴配置
          xAxis: {
            axisLine: {
              onZero: false
            },
            boundaryGap: true,
            position: 'bottom',
            type: 'category',
            axisTick: {
              alignWithLabel: true,
              length: 3,
              interval: 'auto',
            },// 是否显示刻度
            // minInterval: 100,   // 自动计算的坐标轴最小间隔大小
            data: [],   // x轴数据
          },
          // y轴 类型数值轴
          yAxis: {
            type: 'value',   
            splitNumber: 5,
          },
          series: [],  // 数据
          markLine: {},  
      }
      chartsOption.series = []
      chartsOption.xAxis.data = []
      let num = 0
      for (const key in this.originalData) {

        let chartSeries = {
          name: this.waveName[num],  // tootip 提示展示
          type: 'line',   // 线型
          // smooth: true,  // 平滑曲线显示
          showSymbol: false,  // hover是否展示symbol
          hoverAnimation: true, // 是否开启 hover 在 box 上的动画效果。
          data: this.originalData[key],   // 每个数组对应一天线型，跟xAxis对应
          // 每根线的颜色
          lineStyle: {
            normal: {
              width: 2.2,
              color: COLORLIST[num],
            }
          },
          markLine: {
            symbol: 'none',  // 标线两端的标记类型
            lineStyle: {     // 标线的样式
              width: 2.2, 
              normal: {
                color: '#000',
              },
            },
            data: [
              {
                xAxis: this.sprone_dissociation[0] >= 0 ? this.sprone_dissociation[0] : '',
              },
              {
                xAxis: this.sprone_dissociation[1] ? this.sprone_dissociation[1] : '',
              }
            ],
            // label: {
            //   normal: {
            //     formatter: this.dissociation[0],
            //   },
            // },
          },
        }
        // 展示数据
        chartsOption.series.push(chartSeries)
        num++
      }
      
      
      // 获取 this.originalData 中某一个最长的数组
      const maxValue = Math.max(...(Object.values(this.originalData).map(item => item.length)))
      // 顶部展示legend
      let xAxisList = Array.from({ length: maxValue }, (_, i) => i)
      chartsOption.xAxis.data = xAxisList

      this.allStepOneCharts.push(chartsOption)
      // this.originalData.forEach(item => {
      //     // 设置title
      //     title: {
      //       text: '',
      //     },
      //     // 是否使用动画
      //     animation: false,
      //     // 提示弹窗
      //     tooltip: {
      //       trigger: 'axis',
      //       // 自定义tootip 
      //       formatter: (params) => {
      //         let str = `<span>${ params[0].axisValueLabel }</span><br />`
      //         params.forEach((item, index) => {
      //           str += `<div 
      //             style="width:100%;
      //             padding:0 10px;
      //             text-align: left;
      //             ">
      //               <span 
      //                 style="display:inline-block;
      //                 margin-right:5px;
      //                 border-radius:50%;
      //                 width:10px;
      //                 height:10px;
      //                 margin-left:5px;
      //                 background-color: ${COLORLIST[item.seriesIndex]}">
      //               </span>
      //               <span>${this.tooltipList[item.seriesIndex] || ''}：${item.value}
      //           </div>`

      //         })
      //         return str
      //       }
      //     },
      //     color: COLORLIST,
      //     /*  数据数组, 如果 data 没有被指定，会自动从当前系列中获取。
      //         多数系列会取自 series.name 或者 series.encode */ 
      //     legend: {
      //       type: 'scroll',
      //       orient: 'vertical',
      //       align: 'left',
      //       right: '20',
      //       top: '60',
      //       data: [],
      //       icon: 'circle',
      //       width: "80%",
      //       textStyle: {
      //         fontSize: 20
      //       },
      //       formatter: (name) => {
      //         const result = this.getLegendValue(name)
      //         return result
      //       }
      //     },
      //     // echarts 显示位置
      //     grid: {
      //       left: '3%',
      //       right: '13%',
      //       bottom: '15%',
      //       containLabel: true, // 是否展示轴刻度
      //     },
      //     // 滑动条型数据区域缩放组件
      //     dataZoom: [
      //       {
      //         type: 'inside',  // 类型，
      //         xAxisIndex: 0,   // 控制哪个轴
      //         height: 15,
      //         handleSize: '140%',
      //         handleStyle: {
      //           color: '#999',
      //         },
      //         filterMode: 'none',  // 数据过滤模式，放大缩小
      //       }, 
      //       {
      //         type: 'inside',
      //         yAxisIndex: 0,
      //         width:  15,
      //         handleSize: '140%',
      //         handleStyle: {
      //           color: '#999',
      //         },
      //         filterMode: 'none',
      //       },
      //     ],
      //     // 是否可以下载图片
      //     toolbox: {
      //       feature: {
      //         saveAsImage: {},
      //       },
      //     },
      //     // x轴配置
      //     xAxis: [
      //       {
      //         type: 'category',  // 类目轴
      //         axisTick: {
      //           show: true,
      //           alignWithLabel: true,  // 保证刻度线和标签对齐 需要设置
      //         },
      //         boundaryGap: true, // 是否显示刻度
      //         // minInterval: 120,   // 自动计算的坐标轴最小间隔大小
      //         data: [],   // x轴数据
      //       },
      //       {
      //         axisLine: {
      //           onZero: false
      //         },
      //         boundaryGap: true,
      //         position: 'bottom',
      //         type: 'category',
      //         axisTick: {
      //           alignWithLabel: true,
      //           length: 3,
      //           interval: 'auto',
      //         },
      //         data: []
      //       },
      //     ],
      //     // y轴 类型数值轴
      //     yAxis: {
      //       type: 'value',   
      //       splitNumber: 8,
      //     },
      //     series: [],  // 数据
      //     markLine: {},  
      //   }
      //   chartsOption.series = []
      //   chartsOption.xAxis.data = []
      //   let num = 0
      //   if (this.dissType === 'v2') {
      //     for (let i in item) {
      //       if (i !== 'time') {
      //         let chartSeries = {
      //           name: this.waveName[num],  // tootip 提示展示
      //           type: 'line',   // 线型
      //          // smooth: true,  // 平滑曲线显示
      //           showSymbol: false,  // hover是否展示symbol
      //           hoverAnimation: true, // 是否开启 hover 在 box 上的动画效果。
      //           data: item[i],   // 每个数组对应一天线型，跟xAxis对应
      //           // 每根线的颜色
      //           lineStyle: {
      //             normal: {
      //               width: 2.2,
      //               color: COLORLIST[num],
      //             }
      //           },
      //           markLine: {
      //             symbol: 'none',  // 标线两端的标记类型
      //             lineStyle: {     // 标线的样式
      //               width: 2.2, 
      //               normal: {
      //                 color: '#000',
      //               },
      //             },
      //             data: [
      //               {
      //                 xAxis: this.sprone_dissociation[0] >= 0 ? this.sprone_dissociation[0] : '',
      //               },
      //               {
      //                 xAxis: this.sprone_dissociation[1] ? this.sprone_dissociation[1] : '',
      //               }
      //             ],
      //             // label: {
      //             //   normal: {
      //             //     formatter: this.dissociation[0],
      //             //   },
      //             // },
      //           },
      //         }

      //         // echarts 标题
      //         chartsOption.title.text = this.title

      //         // 顶部展示legend
      //         chartsOption.legend.data = this.waveName
      //         // 展示数据
      //         chartsOption.series.push(chartSeries)
      //         num++
      //       } else {
      //         // i === time 将数据设置为 x轴数据
      //         // const arr = item[i].filter(v => {
      //         //   return v % 5 == 0
      //         // })
      //         chartsOption.xAxis[0].data = item[i]
      //         chartsOption.xAxis[1].data = Array.from({ length: item[i].length }, (_, i) => "")
      //         // chartsOption.xAxis.data = item[i]
      //       }
      //     }
      //   } else {
      //     console.log('先不进行处理');
      //     // for (let i in item) {
      //     //   if (i !== 'time') {
      //     //     let chartSeries = {
      //     //       name: `${this.beforeLable[num] + this.unit}`,
      //     //       type: 'line',
      //     //       smooth: true,
      //     //       showSymbol: false,
      //     //       hoverAnimation: false,
      //     //       data: item[i],
      //     //     }
      //     //     chartsOption.title.text =
      //     //       this.$t('page.ODvalue') + this.$t('page.curve')
      //     //     chartsOption.legend.data.push(
      //     //       `${this.beforeLable[num] + this.unit}`
      //     //     )
      //     //     chartsOption.series.push(chartSeries)
      //     //     num++
      //     //   } else {
      //     //     chartsOption.xAxis.data = item[i]
      //     //   }
      //     // }
      //   }
      //   this.allStepOneCharts.push(chartsOption)
      // })
    },
    // legend返回title部分
    // getLegendValue(val) {
    //   const { key = [], data1 = []} = this.resultValue
    //   const index = key.findIndex(item => item === val)
    //   let str = ''
    //   const result1 = data1.some(item => item)
    //   if(result1) {
    //     str = data1[index]
    //     this.tooltipList = data1
    //   } else {
    //     str = val
    //     this.tooltipList = this.waveName
    //   }
    //   return str
    // },

    // 返回生成图片base64
    shotImg(url) {
      this.$emit('showImg', url)
    }
  }
}
</script>

<style>

</style>